<template>
  <div class="cp-box moudle-c">
    <div class="cp-header">
      <img class="cp-icon" src="../../assets/mini_accident/cp03.png" alt="">
      <h4 class="cp-title">现场图片</h4>
    </div>
    <ul v-if="imageInfoList.length > 0" class="cp-content">
      <template v-for="(item, index) in imageInfoList">
        <li v-bind:key="index">
          <img :key="index" class="img-a" :src="item.imgPath | fileFilter" alt="" v-on:click="handleImagePreview"/>
        </li>
      </template>
    </ul>
    <ul v-else class="no-data">
      <img class="nd-img" src="../../assets/mini_accident/no_data.png" alt="">
      <span>暂无信息</span>
    </ul>
    <image-viewer v-if="showViewer" :url-list="imagePaths" :on-close="closeViewer"/>
  </div>
</template>

<script>
import ImageViewer from "element-ui/packages/image/src/image-viewer";
import CommonFilters from "@/mixins/CommonFilters";
import {uploadImage} from "@/config/env";

export default {
  name: "ExpressCenterImage",
  components: {ImageViewer},
  mixins: [CommonFilters],
  data() {
    return {
      showViewer: false,
      imagePaths: []
    };
  },
  computed: {
    imageInfoList() {
      return this.$store.state.HousingInfo.imageInfoList;
    }
  },
  watch: {},
  mounted() {

  },
  methods: {
    handleImagePreview() {
      let _imagePaths = [];
      for (let item of this.imageInfoList) {
        _imagePaths.push(uploadImage + item.imgPath);
      }
      this.imagePaths = _imagePaths;
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import 'src/styles/callpolice';

.cp-content {
  height: 325px;
  overflow-y: scroll;
  padding: 0px 6px 0px 6px;
}

.img-a {
  width: 200px;
  height: 300px;
  cursor: pointer;
  margin: 10px 0px 0px 0px;
}

.cp-content::-webkit-scrollbar {
  display: none
}

ul {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style-type: none;
}
</style>
